<template>
  <div class="login-container">
    <!-- 粒子效果背景 -->
    <div id="particles-js" class="particles-background"></div>
    
    <!-- 登录卡片 -->
    <div class="login-card">
      <div class="login-header">
        <div class="logo">
          <div class="logo-icon">
            <i class="el-icon-bank-card"></i>
          </div>
          <h1>AI金融服务系统</h1>
        </div>
        <div class="slogan">科技引领金融未来</div>
      </div>
      
      <div class="form-container">
        <h2>用户登录</h2>
        
        <el-form 
          ref="loginFormRef" 
          :model="loginForm" 
          :rules="loginRules" 
          class="login-form"
        >
          <el-form-item prop="username">
            <el-input 
              v-model="loginForm.username" 
              placeholder="用户名/手机号"
              :prefix-icon="User"
              clearable
              @keyup.enter="handleLogin"
            />
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input 
              v-model="loginForm.password" 
              placeholder="密码" 
              :prefix-icon="Lock"
              show-password
              @keyup.enter="handleLogin"
            />
          </el-form-item>
          
          <div class="remember-forgot">
            <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
            <a href="javascript:void(0)" class="forgot-password" @click="forgotPassword">忘记密码?</a>
          </div>
          
          <el-button 
            type="primary" 
            class="login-button" 
            :loading="loading" 
            @click="handleLogin"
          >
            登录
          </el-button>
          
          <div class="register-link">
            还没有账户? 
            <router-link to="/register" class="register-now">立即注册</router-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup name="UserLoginView">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { User, Lock } from '@element-plus/icons-vue';
import { useUserStore } from '@/store/user';

// 初始化路由和store
const router = useRouter();
const userStore = useUserStore();
const loginFormRef = ref(null);

// 表单数据
const loginForm = reactive({
  username: '',
  password: '',
  rememberMe: false
});

// 表单验证规则
const loginRules = {
  username: [
    { required: true, message: '请输入用户名或手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
  ]
};

// 加载状态
const loading = ref(false);

// 处理登录
const handleLogin = async () => {
  // 表单验证
  if (!loginFormRef.value) return;
  
  await loginFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      
      try {
        // 调用登录接口
        await userStore.loginAction(loginForm);
        
        // 登录成功后跳转到首页
        ElMessage.success('登录成功');
        router.push('/');
      } catch (error) {
        console.error('登录失败:', error);
      } finally {
        loading.value = false;
      }
    } else {
      ElMessage.error('请正确填写登录信息');
      return false;
    }
  });
};

// 忘记密码
const forgotPassword = () => {
  ElMessage.info('请联系客服重置密码');
};

// 初始化粒子效果
const initParticles = () => {
  if (window.particlesJS) {
    window.particlesJS('particles-js', {
      particles: {
        number: {
          value: 80,
          density: {
            enable: true,
            value_area: 800
          }
        },
        color: {
          value: '#1989fa'
        },
        shape: {
          type: 'circle',
          stroke: {
            width: 0,
            color: '#000000'
          },
        },
        opacity: {
          value: 0.5,
          random: false,
          anim: {
            enable: false,
            speed: 1,
            opacity_min: 0.1,
            sync: false
          }
        },
        size: {
          value: 3,
          random: true,
          anim: {
            enable: false,
            speed: 40,
            size_min: 0.1,
            sync: false
          }
        },
        line_linked: {
          enable: true,
          distance: 150,
          color: '#1989fa',
          opacity: 0.4,
          width: 1
        },
        move: {
          enable: true,
          speed: 2,
          direction: 'none',
          random: false,
          straight: false,
          out_mode: 'out',
          bounce: false,
          attract: {
            enable: false,
            rotateX: 600,
            rotateY: 1200
          }
        }
      },
      interactivity: {
        detect_on: 'canvas',
        events: {
          onhover: {
            enable: true,
            mode: 'grab'
          },
          onclick: {
            enable: true,
            mode: 'push'
          },
          resize: true
        },
        modes: {
          grab: {
            distance: 140,
            line_linked: {
              opacity: 1
            }
          },
          bubble: {
            distance: 400,
            size: 40,
            duration: 2,
            opacity: 8,
            speed: 3
          },
          repulse: {
            distance: 200,
            duration: 0.4
          },
          push: {
            particles_nb: 4
          },
          remove: {
            particles_nb: 2
          }
        }
      },
      retina_detect: true
    });
  }
};

// 页面加载时初始化粒子效果
onMounted(() => {
  // 如果是从通过浏览器后退按钮到达此页面，强制刷新
  // window.performance.navigation.type === 2 表示通过浏览器后退按钮到达
  if (window.performance && window.performance.navigation.type === 2) {
    window.location.reload();
    return;
  }
  
  // 动态加载particles.js脚本
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';
  script.onload = () => {
    initParticles();
  };
  document.head.appendChild(script);
});
</script>

<style scoped>
.login-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  overflow: hidden;
}

.particles-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.login-card {
  width: 420px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  padding: 40px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  animation: fadeIn 0.5s ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.logo-icon {
  font-size: 40px;
  color: #1989fa;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #1989fa, #5cadff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1e3c72;
  margin: 0;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slogan {
  font-size: 16px;
  color: #666;
  font-weight: 300;
}

.form-container h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 22px;
  color: #333;
  font-weight: 500;
}

.login-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 20px;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
}

.forgot-password {
  color: #1989fa;
  text-decoration: none;
  transition: all 0.3s;
}

.forgot-password:hover {
  color: #5cadff;
  text-decoration: underline;
}

.login-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(135deg, #1989fa, #5cadff);
  border: none;
  letter-spacing: 1px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(25, 137, 250, 0.3);
}

.register-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #606266;
}

.register-now {
  color: #1989fa;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
}

.register-now:hover {
  color: #5cadff;
  text-decoration: underline;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式适配 */
@media (max-width: 480px) {
  .login-card {
    width: 90%;
    padding: 30px 20px;
  }
  
  .logo h1 {
    font-size: 24px;
  }
}
</style>
